<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Signin Template · Bootstrap v5.1</title>

    <link rel="canonical" th:href="@{https://getbootstrap.com/docs/5.1/examples/sign-in/}">



    <!-- Bootstrap core CSS -->
    <link th:href="@{/assets/dist/css/bootstrap.min.css}" rel="stylesheet">

    <style>
        .bd-placeholder-img {
            font-size: 1.125rem;
            text-anchor: middle;
            -webkit-user-select: none;
            -moz-user-select: none;
            user-select: none;
        }

        @media (min-width: 768px) {
            .bd-placeholder-img-lg {
                font-size: 3.5rem;
            }
        }

        .box{
            padding: 15px;
            width: 300px;
            height: 300px;
            background-image: linear-gradient(#E1F5FE,#B3E5FC,#81D4FA,#4FC3F7,#29B6F6,#03A9F4,#039BE5,#0288D1,#0277BD);

            border-radius: 10px;box-shadow: 0px 0px 8px #888888;
        }

        .form-floating{
            margin: 5px 0 5px 0;
        }
        .form-control{
            border-radius: 0.4rem;
        }
        .form-floating>.form-control{
            height: 50px;
        }
        .btn{
            margin-top: 10px;
        }
        .btn:hover{
            background: #1bd1a5;
            transition: 0.5s;
        }
    </style>


    <!-- Custom styles for this template -->
    <link th:href="@{/static/css/signin.css}" rel="stylesheet">
</head>
<body class="text-center">

<main class="form-signin box">
<!--    <img class="mb-4" th:src="@{/assets/brand/bootstrap-logo.svg}" alt="" width="72" height="57">-->
    <h1 class="h3 mb-3 fw-normal">请注册</h1>
    <form th:action="@{/register}" method="post" class="gap-6">
        <div class="form-floating ">
            <input type="email" class="form-control" id="floatingEmail" placeholder="username"  name="email" required>
            <label for="floatingEmail">电子邮箱</label>
        </div>
        <div class="form-floating">
            <input type="text" class="form-control" id="floatingInput" placeholder="username"  name="username" required>
            <label for="floatingInput">用户名</label>
        </div>
        <div class="form-floating">
            <input type="password" class="form-control" id="floatingPassword" placeholder="Password" name="password" required>
            <label for="floatingPassword">密码</label>
        </div>
        <button class="btn btn-lg " type="submit">注册</button>
        <p th:text="${msg}"></p>
    </form>
<!--    <p class="mt-5 mb-3 text-muted">&copy; 2017–2022</p>-->
</main>




<script>
    window.onload=function(){
        var w = document.documentElement.scrollWidth;
        var h = document.documentElement.scrollHeight;
        w = (w-300)/2;
        h = (h-300)/2;
        var box = document.querySelector(".box");
        box.style.position = 'absolute';
        box.style.left = w+'px';
        box.style.top = h+'px';
    }
</script>

</body>
</html>